<template>
    <div class="cms-home">
        <el-row :gutter="20">
            <el-col :span="16">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>项目信息</span>
                        <el-button style="float: right; padding: 3px 0" type="text">系统版本:1.9.0</el-button>
                    </div>
                    <h4>系统介绍</h4>
                        <p>这个考试系统是基于Nodejs+Vue技术栈开发的，包含在线考试，考试规则，智能算分等考试功能</p>
                        <p>流程通畅</p>
                       
                        <h4>技术栈</h4>
                        <p>
                            <el-tag v-for="(tag,index) in tags" :key="index" closable style="margin-right:10px;">
                                {{ tag.name }}
                            </el-tag>
                        </p>
                        <h4>产品功能</h4>

                    <div  v-for="item in abilities" :key="item.id" class="text item">
                        {{ item.text }}
                    </div>
                </el-card>
            </el-col>


            <el-col :span="8">
                <el-card class="box-card my-home-right">
                    <div slot="header" class="clearfix  red-color">
                        <span>答题须知</span>
                    </div>
                    <div  v-for="item in msgArr" :key="item.id" class="text item red-color">
                        {{ item.id }}.{{ item.msg }}
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
export default {
    name: 'dashboard',
    data() {
        return {
            name: localStorage.getItem('ms_username'),
            tags: [
                {name:'Nodejs',type:1},
                {name:'Express',type:2},
                {name:'Vue',type:3},
                {name:'ElementUI',type:4},
                {name:'Mysql',type:5},
            ],
            abilities: [
                {text:"系统完善:完善的前后端分离隙构、规范的接口文档",id:1},
                {text:"权限控制:基于shiro和和UJWT开发的权限控制功能",id:2},
                {text:"基远功能:系统配善,用户管理、题库管理",id:3},
                {text:"题库管理:支特单选题、多选题、判断题",id:4},
                {text:"考试权限:支持指定考试范围:完全公开",id:5},
                {text:"在线考试:学员在线考试,查看分数",id:6}
            ],
            msgArr: [
             {msg:'本在线答题系统支持Windows和Mac os系统。',id:1},
             {msg:'本答题系统题库已经明确标明考试限制时间，如规定时间内未作答，将会视为自动交卷。',id:2},
             {msg:'本答题系统属于开放式系统，所有用户都可以建立自己答题题库和试题。',id:3},
             {msg:'答题题库若想公开可以进入我的题库勾选相应题库进行勾选，然后发布即可。',id:4},
             {msg:'自己的题库如有错误或者疏漏，可以自行进入我的试题界面进行对应试题修改。',id:5}
            ]
        };
    },
    components: {
        Schart
    },
    computed: {
        role() {
            return this.name === 'admin' ? '超级管理员' : '普通用户';
        }
    },
    // created() {
    //     this.handleListener();
    //     this.changeDate();
    // },
    // activated() {
    //     this.handleListener();
    // },
    // deactivated() {
    //     window.removeEventListener('resize', this.renderChart);
    //     bus.$off('collapse', this.handleBus);
    // },
    methods: {
        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            });
        }
        // handleListener() {
        //     bus.$on('collapse', this.handleBus);
        //     // 调用renderChart方法对图表进行重新渲染
        //     window.addEventListener('resize', this.renderChart);
        // },
        // handleBus(msg) {
        //     setTimeout(() => {
        //         this.renderChart();
        //     }, 200);
        // },
        // renderChart() {
        //     this.$refs.bar.renderChart();
        //     this.$refs.line.renderChart();
        // }
    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}
.box-card h4 {
    padding: 10px 0 ;
    border-bottom: 1px solid #f0f0f0;
}
.box-card p {
    padding: 5px 0;
}
.box-card .text {
    padding: 5px 0;
    color: #666;
}
.cms-home .el-card {
    height: 600px;
}

.my-home-right .text {
    padding: 10px 0;
}
.red-color {
    color: #f00 !important;
}
</style>
